<template>
  <div style="padding:6px;">
    <el-card v-show="showSearch" style="margin-bottom:5px;">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" style="margin-bottom:-20px;">
        <!--                <el-form-item label="设备名称" prop="name">-->
        <!--                    <el-input v-model="queryParams.code" placeholder="请输入参数编码" clearable size="small"-->
        <!--                        @keyup.enter.native="handleQuery" />-->
        <!--                </el-form-item>-->
        <!--        <el-form-item label="设备编码" prop="name">-->
        <!--          <el-input v-model="queryParams.deviceCode" placeholder="请输入参数名称" clearable size="small"-->
        <!--                    @keyup.enter.native="handleQuery" />-->
        <!--        </el-form-item>-->

        <el-form-item label="参数名称" prop="parameterNameQuery">
          <el-input v-model="queryParams.parameterNameQuery" placeholder="请输入参数名称" clearable size="small"
                    @keyup.enter.native="handleQuery" />
        </el-form-item>

        <el-form-item label="参数编码" prop="parameterCodeQuery">
          <el-input v-model="queryParams.parameterCodeQuery" placeholder="请输入参数编码" clearable size="small"
                    @keyup.enter.native="handleQuery" />
        </el-form-item>

<!--        <el-form-item label="参数预警" prop="alarmStatus">-->
<!--          <el-select v-model="queryParams.alarmStatus">-->
<!--            <el-option label="正常" value="正常"/>-->
<!--            <el-option label="预警" value="预警"/>-->
<!--          </el-select>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="开始时间">-->
<!--          <el-date-picker-->
<!--            value-format="yyyy-MM-dd HH:mm:ss"-->
<!--            v-model="queryParams.startTime"-->
<!--            type="datetime"-->
<!--            placeholder="请输入开始时间"-->
<!--            :disabled-date="disableFutureDate"-->
<!--          >-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="结束时间" prop="endTime">-->
<!--          <el-date-picker-->
<!--            value-format="yyyy-MM-dd HH:mm:ss"-->
<!--            v-model="queryParams.endTime"-->
<!--            type="datetime"-->
<!--            placeholder="请输入结束时间"-->
<!--            :disabled-date="disableFutureDate"-->
<!--          >-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->

        <el-form-item label="开始时间">
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="queryParams.startTime"
            type="datetime"
            placeholder="请输入开始时间"
            :picker-options="startPickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="queryParams.endTime"
            type="datetime"
            placeholder="请输入结束时间"
            :picker-options="endPickerOptions"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button type="warning" icon="el-icon-sold-out" size="mini" @click="handleExport">导出</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="padding-bottom:100px;">
      <el-table v-loading="loading" :data="parameterList" border>
        <el-table-column label="设备名称" align="center" prop="deviceName" />
        <el-table-column label="设备编码" align="center" header-align="center" prop="deviceCode" min-width="70" />
        <el-table-column label="监测时间" align="center" prop="monitorTime" min-width="120"/>
        <el-table-column label="参数名称" align="center" prop="parmaterName" />
        <el-table-column label="参数编码" align="center" prop="parmaterCode" />
        <el-table-column label="参数值" align="center" prop="parmaterValue" />
        <el-table-column label="参数预警" align="center" prop="alarm" />
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize" @pagination="getList" />
    </el-card>
  </div>
</template>

<script>
import {
  listMonitor,listMonitorTaos,exportExcelList
} from "@/api/iot/monitor";
import { getDevice } from '@/api/iot/device';
import moment from "moment";
import * as echarts from 'echarts';
import { exportExcel } from '@/utils/utilsExcel'; // 引入工具方法

export default {
  name: "Parameter",
  dicts: ["iot_yes_no"],
  data() {
    return {
      // 是否为租户
      isTenant: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 产品分类表格数据
      parameterList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deviceCode: "",
        startTime: moment(new Date(Date.now() - 24 * 60 * 60 * 1000)).format('YYYY-MM-DD HH:mm:ss'),
        endTime:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
        alarmStatus: null,
        parameterNameQuery:"",
        parameterCodeQuery:""
      },
      // 表单参数
      form: {
        productId: 0
      },
      // 表单校验
      rules: {
        code: [{
          required: true,
          message: "参数编码不能为空",
          trigger: "blur"
        }
        ],
        name: [{
          required: true,
          message: "参数名称不能为空",
          trigger: "blur"
        },
        ],
      },
      // 开始时间禁用规则
      startPickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > Date.now();
        }
      },
      // 结束时间禁用规则（可复用同一个逻辑）
      endPickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > Date.now();
        }
      },
    };
  },
  created() {
    this.init();
    // 获取设备信息
    this.form.deviceId = this.$route.query && this.$route.query.deviceId;
    if (this.form.deviceId != 0) {
      // this.connectMqtt();
      this.getDevice(this.form.deviceId);
    }
  },
  mounted() {
    this.initEChart1();
  },
  methods: {
    init() {
      if (this.$store.state.user.roles.indexOf("tenant") !== -1) {
        this.isTenant = true
      }
    },
    /**获取设备详情*/
    getDevice(deviceId) {
      getDevice(deviceId).then((response) => {
        this.queryParams.deviceCode = response.data.serialNumber;
        this.getList();
      });
    },
    /** 查询设备参数列表 */
    getList() {
      this.loading = true;
      listMonitorTaos(this.queryParams).then(response => {
        console.log("xxxxxxx12121212xxxxxxxxx",response)
        this.parameterList = response.rows;
        this.total = response.total;
        this.loading = false;
      });

      // listMonitor(this.queryParams).then(response => {
      //   // console.log(11111111111111111111,response)
      //   this.parameterList = response.rows;
      //   console.log(111111111111111111111111111111111,this.parameterList,response.rows)
      //   this.total = response.total;
      //   this.loading = false;
      // });
    },
    // 导出Excel（调用公共方法）
    handleExport() {
      // 定义表头映射（key为原始字段名，value为显示的表头名）
      const headerMap = {
        deviceName: '设备名称',
        deviceCode: '设备编码',
        monitorTime: '监测时间',
        parmaterName: '参数名称',
        parmaterCode: '参数编码',
        parmaterValue: '参数值',
        alarm: '参数预警'
      };
      exportExcelList(this.queryParams).then(response => {
        console.log("rrrrrrrrrrrrrrrrrrrrrrrrrrrr",response)
        if (response == null ){
        }
        this.loading = false;
        exportExcel(response, '监测数据', headerMap);
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
};
</script>
